<style lang="scss" scoped>
    .index2{
        width: 100%;
        min-height: 100vh;
        height: 100%;
        background: url(./assets/body-bg.png) no-repeat;
        background-size: cover;
        color: #fff;
    }
    .top_title p {
        margin-top: 20px;
        img{
            width: 24px;
            margin:0 10px;
            vertical-align: bottom;
        }
    }
    .box{
        background: url(./assets/box_title.png) no-repeat;
        background-size:contain;
        border:1px dashed #fff;
        .box_title{
            font-size: 18px;
            margin-top: 8px;;
            // line-height: 36px;
            text-indent: 20px;
        }
        .box_title.center{
            text-align: center;
        }
    }
    .geography_info{
        .up{
            .left{
                font-size: 26px;
                background: #061E2C;
                border:1px dashed #fff;
                width: 60px;
                height: 60px;
                line-height: 60px;
                text-align: center;
            }
        }
        .info{
            color: #02CCCE;
        }
        .down p{
            width: 50%;
        }
    }
    .left_chart{
        &>div>div{
            height: 200px;
        }
    }
    .center_box{
        border:1px dashed #fff;
        .top_item{
            width: 13%;
            font-size: 12px;
            p{
                border-radius: 3px;
                color: #64DCD2;
                line-height: 26px;
                padding-left: 10px;
                border:2px solid rgba(6, 104, 186, 0.5);
            }
        }
        .small_chart{
            &>div{
                height: 200px;
            }
        }
        .population_count{
            .population_count1_chart{
                position: relative;
                height: 110px;
                .info{
                    height: 100%;
                    position:absolute;
                    right: 10px;
                    top: 0;
                    width: 90px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    li{
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;
                        p.no{
                            padding-left: 20px;
                            position: relative;
                            &::before{
                                content: '';
                                position: absolute;
                                left: 0;
                                top: 6px;
                                width: 10px;
                                height: 10px;
                                border-radius: 50%;
                            }
                        }
                        img{
                            width:11px;
                            height: 11px;
                            margin-top: 3px;
                        }
                    }
                    li:nth-child(1) p.no::before{
                        background: #01B4D2;
                    }
                    li:nth-child(2) p.no::before{
                        background: #FFB508;
                    }
                    li:nth-child(3) p.no::before{
                        background: #9702FE;
                    }
                    li:nth-child(4) p.no::before{
                        background: #00BD8D;
                    }
                }
            }
            .population_count2_chart{
                height: 200px;
                position: relative;
                .info{
                    position: absolute;
                    display: flex;
                    justify-content: space-between;
                    width:100px;
                    right: 10px;
                    top: 30px;
                    p{
                        position: relative;
                        padding-left: 20px;;
                        &::before{
                            content: '';
                            width: 12px;
                            height: 12px;
                            position: absolute;
                            left: 0;
                            top: 4px;
                        }
                    }
                    p:nth-child(1)::before{
                        background: linear-gradient(#04FDCB, #03B1D3);
                    }
                    p:nth-child(2)::before{
                        background: linear-gradient(#E69A12, #0CBA89);
                    }
                   
                }
            }
        }
        .rounded_circle{
            text-align: center;
            .item{
                width: 30%;
            }
        }
        .monitor{
            padding:12px 0;
            p{
                background: #13335F;
                text-align: center;
                width: 80px;
                height: 80px;
                line-height: 80px;
                position: relative;
            }
            p:last-child{
                background: #071D39;
            }
        }
        .after{
            h2{
                margin: 0;
                line-height: 50px;
                color: #64DCD2;
            }
        }
    }
    .footer{
        color: #64DCD2;
        font-size: 20px;
        border:2px solid #053765;
        border-radius: 3px;
    }
    .right_box{
        .tabs{
            p{
                background: rgba($color: #052541, $alpha: .7);
            }
            p.active{
                background: transparent;
                position: relative;
                &::after{
                    content: '';
                    left: 0;right: 0;
                    bottom: -2px;
                    position: absolute;
                    margin:auto;
                    width: 40px;
                    height: 2px;
                    background: #02C1EA;
                }
            }
        }
        .content{
             .no_title{
                margin:0;
                font-size: 18px;
                line-height: 40px;
                padding-left: 20px;
                position: relative;
                &::before{
                    content: '';
                    width: 10px;
                    height: 10px;
                    background: #019CFF;
                    border-radius: 50%;
                    position: absolute;
                    left: 0;
                    top: 15px;
                }
            }
            .service_info{
                text-align: center;
                .item{
                    padding-bottom: 20px;
                    width: 33.33%;
                    border-right:1px solid #033A63;
                    &:last-child{
                        border-right: 0;
                    }
                }
            }
            .trade_entry{
                height: 230px;
            }
            .trade_security{
                height: 300px;
            }
        }
    }
</style>
<template>
    <div class="index2 p-2">
        <div class="top_title d-flex between p-1">
            <p>2018年12月12号 星期三 <img src="@/assets/weather.png" alt=""></p>
            <img src="@/assets/index2_title.png" alt="">
            <p> <img src="@/assets/notice.png" alt="">公告：关于建设平安福州</p>
        </div>
        <Row type="flex" justify="space-between" :gutter="20">
            <Col span="6">
                <div class="box geography_info" >
                    <h5 class="box_title">地理介绍</h5>
                    <div class="p-2">
                        <div class="d-flex up mb-2">
                            <div class="left mr-2">东</div>
                            <div class="right">
                                <h2>东二环xxxx广场</h2>
                                <p class="font-14">xxxxxxxxxx</p>
                            </div>
                        </div>
                        <p class="info">东二环xxxxxx广场位于连江路与塔头路的交汇处，地处晋安新区中心CBD的腹心地块。</p>
                        <div class="d-flex wrap down mt-2">
                            <p>占地面积：226.62亩</p>
                            <p>主力户型：城市综合体</p>
                            <p>项目区域：晋安区</p>
                            <p>物业类别：普通公寓</p>
                        </div>
                    </div>
                </div>
                <div class="box my-2 left_chart">
                    <h5 class="box_title">东片区统计</h5>
                    <div class="p-2 ">
                        <div ref="eas_count_chart" ></div>
                    </div>
                </div>
                <div class="box my-2 left_chart">
                    <h5 class="box_title">西安区统计</h5>
                    <div class="p-2 ">
                        <div ref="xiAn_count_chart" ></div>
                    </div>
                </div>
            </Col>
            <Col span="12">
                <div class="center_box p-2">
                    <div class="d-flex between" >
                        <div class="top_item" v-for="val in 6" :key="val">
                            <span>时段人流量</span>
                            <p>3600</p>
                        </div>
                    </div>
                    <Row :gutter="10" class="my-1">
                        <Col span="12">
                            <div class="small_chart box">
                                <h5 class="box_title">人口信息</h5>
                                <div ref="population_chart"></div>
                            </div>
                        </Col>
                        <Col span="12">
                            <div class="small_chart box">
                                <h5 class="box_title">防控力量</h5>
                                <div ref="antiepidemic_chart"></div>
                            </div>
                        </Col>
                    </Row>
                    <Row :gutter="10">
                        <Col span="12">
                            <div class="box population_count">
                                <h5 class="box_title">防控力量</h5>
                                <div  class="population_count1_chart">
                                    <div class="h-100b" ref="population_count1_chart"></div>
                                    <ul class="info">
                                        <li v-for="val in 4" :key="val">
                                            <p class="no">住户</p>
                                            <p>45%</p>
                                            <img :src="val==2?down:up" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div  class="population_count2_chart">
                                    <div class="h-100b" ref="population_count2_chart"></div>
                                    <div class="info">
                                        <p>646</p>
                                        <p>756</p>
                                    </div>
                                </div>
                            </div>
                        </Col>
                        <Col span="12">
                            <div class="box">
                                <h5 class="box_title">警用装备</h5>
                                <div class="d-flex around h-100b rounded_circle py-2">
                                    <div class="item">
                                        <i-circle :size="90" :percent="25" trail-color="#3C404C" stroke-color="#DA0051" >
                                            <span >25%</span>
                                        </i-circle>
                                        <p>警械</p>
                                    </div>
                                     <div class="item">
                                        <i-circle :size="90" :percent="50" trail-color="#3C404C" stroke-color="#FFB508">
                                            <span >50%</span>
                                        </i-circle>
                                        <p>车辆</p>
                                    </div>
                                    <div class="item">
                                        <i-circle :size="90" :percent="60" trail-color="#3C404C" stroke-color="#01BD8D">
                                            <span >60%</span>
                                        </i-circle>
                                        <p>其他</p>
                                     </div>
                                   
                                </div>
                            </div>
                            <div class="box mt-1">
                                <h5 class="box_title">视频监控</h5>
                                <div class="monitor d-flex around">
                                    <p></p>
                                    <p></p>
                                    <p>查看更多</p>
                                </div>
                            </div>
                        </Col>
                    </Row>
                    <div class="after">
                        <h2>巡逻安排</h2>
                        <div class="d-flex wrap">
                            <div class="item mr-2 font-16" v-for="val in 5" :key="val">线路1：张延涛 A1巡逻队 </div>
                        </div>
                    </div>
                </div>
                <div class="footer px-2 py-1 d-flex between mt-1">
                    <p>B区204号发生玻璃窗碎裂事故</p>
                    <p>#64DCD2</p>
                </div>
            </Col>
            <Col span="6">
                <div class="box right_box">
                    <h5 class="box_title">商圈基础信息</h5>
                    <div class="tabs d-flex between text-center pb-1 ">
                        <p class="active w-50b font-16 py-1">商务信息</p>
                        <p class="w-50b font-16 py-1">治安数据</p>
                    </div>
                    <div class="content p-2">
                        <h4 class="no_title my-1">服务信息</h4>
                        <div class="service_info d-flex between">
                            <div class="item">
                                <p>平安宣传</p>
                                <h2>183篇</h2>
                            </div>
                            <div class="item">
                                <p>平安宣传</p>
                                <h2>183篇</h2>
                            </div>
                            <div class="item">
                                <p>平安宣传</p>
                                <h2>183篇</h2>
                            </div>
                        </div>
                        <h4 class="no_title my-1">商圈人口分析</h4>
                        <div class="trade_entry" ref="trade_entry_chart"> </div>
                        <h4 class="no_title my-2">商圈治安数据</h4>
                        <div class="trade_security" ref="trade_security_chart"></div>
                    </div>
                    
                </div>
            </Col>

        </Row>
    </div>
</template>

<script>
import echarts from 'echarts'
import eas_count from "@/assets/charts/eas_count"
import xiAn_count from "@/assets/charts/xiAn_count"
import population from "@/assets/charts/population"
import antiepidemic from "@/assets/charts/antiepidemic"
import trade_entry from "@/assets/charts/trade_entry"
import trade_security from "@/assets/charts/trade_security"
import population_count1 from "@/assets/charts/population_count1"
import population_count2 from "@/assets/charts/population_count2"
import up from "@/assets/up.png"
import down from "@/assets/down.png"
export default {
    data(){
        return {
            up,
            down
        }
    },
    mounted(){
        this.$nextTick(()=>{
            const eas_count_chart=echarts.init(this.$refs.eas_count_chart)
            const xiAn_count_chart=echarts.init(this.$refs.xiAn_count_chart)
            const population_chart=echarts.init(this.$refs.population_chart)
            const antiepidemic_chart=echarts.init(this.$refs.antiepidemic_chart)
            const population_count1_chart=echarts.init(this.$refs.population_count1_chart)
            const population_count2_chart=echarts.init(this.$refs.population_count2_chart)
            const trade_entry_chart=echarts.init(this.$refs.trade_entry_chart)
            const trade_security_chart=echarts.init(this.$refs.trade_security_chart)
            
            eas_count_chart.setOption(eas_count);
            xiAn_count_chart.setOption(xiAn_count);
            population_chart.setOption(population);
            antiepidemic_chart.setOption(antiepidemic);
            population_count1_chart.setOption(population_count1);
            population_count2_chart.setOption(population_count2);
            trade_entry_chart.setOption(trade_entry);
            trade_security_chart.setOption(trade_security);
        })
    }
}
</script>
